<template>
  <div>
        <div class="allactivity">
            <!-- 活动的帖子组件 -->
            <!-- 最大的框里面是一个图片 -->
            <h3>
                <!-- 兼职的职位 -->
                高级前端研发专家
                <!-- <van-popover class="deletelikelis" style="     float: right;margin-right: 0rem;"
                    v-model="showPopover"
                    trigger="click"
                    placement="bottom-end"
                    >   
                    <div class="list">
                        <ul>
                            <li>取消发布</li>
                        </ul>
                    </div>
                    <template #reference>
                        <van-button style="width: 1rem;height: 0.8rem;margin-right: 0rem;border:none">
                            <i style="margin-right: 0rem;" class="iconfont icon-gengduo"></i>
                        </van-button>
                    </template>
                </van-popover> -->
                <!-- <button class="activitycontain">活动详情</button> -->
            </h3>
            <p>
                <!--发布帖子的用户的头像-->
                <img style="width:40px;height:40px" src="../../assets/img/1.jpg"/>
                <span>阿里巴巴公司</span>
                <span>发布时间21.2.8-21.5.8</span>
            </p>
            <p>地址：北京</p>
            <p>兼职要求：3-4年工作经验</p>
            <p>招聘总数：5人</p>
            <p>
                <!--此处应该判断是否为本人的id如果本人不显示报名情况，不是本人仅仅可以去报名-->
                <button @click="lookalljobperson()" style="float:right">查看报名情况</button>
                <button @click="gojob()" style="float:right">去报名</button>
                <!-- 此处可以为已截至 -->
            </p>

            <!-- 去报名的弹出框 -->
            <van-popup id="activitychangediv" v-model="changeactivity" position="bottom" :style="{ height: '50%' }">
                <div>
                    <p id="jobid"></p>
                    <!--兼职帖子的id-->
                    <!-- 年龄 -->
                    <p>
                        <select id="age">
                            <option>19</option>
                            <option>20</option>
                            <option>21</option>
                        </select>
                    </p>
                    <!-- 学校 -->
                    <p>
                        <select id="school">
                            <option>河南科技学院</option>
                            <option>河南师范大学</option>
                            <option>河南理工大学</option>
                        </select>
                    </p>
                    <!-- 性别 -->
                    <p>
                        <select id="sex">
                            <option>请选择</option>
                            <option>男</option>
                            <option>女</option>
                        </select>
                    </p>
                    <p>
                        <input id="telephone" placeholder="请输入手机号">
                    </p>
                    <p>
                        <input id="name" placeholder="请输入姓名">
                    </p>
                    <p>
                        <button @click="yeschangeactivity()">确认</button>
                        <button @click="hidePopup()">取消</button>
                    </p>
                </div>
            </van-popup>

            
        </div>  
  </div>
</template>

<script>
export default {
    name:'Job',
    data(){
        return{
            changeactivity:false,
            showPopover:false
        }
    },
    methods: {
        //点击显示去报名兼职的弹出框
        gojob(){
            this.changeactivity=true
        },
        //取消报名框
        hidePopup(){
            this.changeactivity=false
        },
        //查看全部的报名情况
        lookalljobperson(){
            
        }
    },
}
</script>

<style lang="less" scoped>
    .allactivity{
        width: 100%;
        height: 100%;
        .activitycontain{
            float: right;
            border: none;
            background-color: burlywood;
            color: white;
            padding: 0.1rem;
            margin: auto;
        }
            margin-top:10% ;
            width: 100%;
            p{
                margin-left:2% ;
                margin: 0.2rem 0.2rem;
                button{
                        float: right;
                        background-color: white;
                        border: none;
                        color: cornflowerblue;
                        font-size: 0.2rem;
                }
            }

    }

    #activitychangediv{
        p{
            padding: 0;
            margin: auto;
            margin-top: 0.5rem;
            select{
                width:100% ;
                height: 10%;
            }
            input{
                width:100% ;
                height: 10%;
            }
        }
    }
</style>